// 获取数据长度
const data_len = goodsData.length;

// 获取加载按钮
const btnLoadData = document.getElementById('btnLoadData');
// 获取数据表格内的表体
const infoTbody = document.querySelector('.table-goods-info tbody');
// 全选按钮的事件
const ckbMainCtrl = document.getElementById('ckbMainCtrl');
/************************************** */
/* 事件执行或函数调用部分 */
/************************************** */
xx();
// 加载数据按钮事件
btnLoadData.onclick = function() {
    // 调用加载表体数据的函数
    loadTbodyData();
    // 调用单个商品选择后的连锁事件
    goodsChecked();
    // 调用单个删除功能
    singleDelet();
    xx();
}

ckbMainCtrl.onchange = function() {
    // 调用全选事件函数
    allCheckCtrl();
}

/************************************** */
/* 函数定义部分 */
/************************************** */
/**
 * 加载表体数据的函数
 */
function loadTbodyData() {
    // 清空原有表体内容
    infoTbody.innerHTML = '';

    // 获取总控制选择框
    const ckbMainCtrl = document.getElementById('ckbMainCtrl');

    // 如果数据为空则禁用总控制选择框，否则启用
    data_len ? 
        ckbMainCtrl.disabled = false : 
        ckbMainCtrl.disabled = true;

    // 为表体写入数据
    for(let i = 0; i < data_len; i++) {
        // 创建行
        infoTbody.innerHTML += '<tr></tr>'

        // 获取到当前表格行
        const theTr = infoTbody.children[i];
        // 为当前行加入选择框
        theTr.innerHTML = `<td>
            <input class="ckbGoods" name="ckbGoods" type="checkbox">
        </td>`;
        // 为当前行加入单元格和对应的数据
        for(const cell in goodsData[i]) {
            // 保质期
            if(cell === "qualityDete") {
                const qualityDete = goodsData[i][cell];
                theTr.innerHTML += `<td>${qualityDete}年</td>`;
            }
            // 单价
            else if(cell === "price") {
                const price = goodsData[i][cell].toFixed(2);
                theTr.innerHTML += `<td>￥${price}</td>`;
            }
            // 其它数据
            else {
                theTr.innerHTML += `<td>${goodsData[i][cell]}</td>`;
            }
        }
        // 为当前行加入操作按钮
        theTr.innerHTML += `<td class="ctrl-colum">
            <a class="detail">详情</a>
            <a class="delete">删除</a>
        </td>`;
    }
}
/**
 * 全选事件函数
 */
function allCheckCtrl() {
    // 获取到每个商品的选择框集合
    const ckbGoods = document.getElementsByName('ckbGoods'),
          ckbGoods_len = ckbGoods.length;
    
    // 获取到全选按钮的选中状态
    const ckbMainCtrl_state = ckbMainCtrl.checked;

    // 如果处于选中状态
    if(ckbMainCtrl_state) {
        // 让每一个商品都被选中
        for(let i = 0; i < ckbGoods_len; i++) {
            ckbGoods[i].checked = true;
        }
    }
    // 如果没有选中
    else {
        // 取消每一个商品的选中
        for(let i = 0; i < ckbGoods_len; i++) {
            ckbGoods[i].checked = false;
        }
    }
}
/**
 * 单个商品选择后的连锁事件
 */
function goodsChecked() {
    // 获取到每个商品的选择框集合
    const ckbGoods = document.getElementsByName('ckbGoods'),
          ckbGoods_len = ckbGoods.length;

    // 为每一个选择框绑定选择事件
    for(let i = 0; i < ckbGoods_len; i++) {
        ckbGoods[i].onchange = function() {
            // 调用设置全选按钮的显示状态
            setAllCkdState();
        }
    }
}
/**
 * 设置全选按钮的显示状态
 */
function setAllCkdState() {
    // 获取当前表格行的个数
    const trCount = infoTbody.querySelectorAll('tr').length;

    // 获取当前被选中商品的个数
    const ckdCount = document.querySelectorAll('input[name="ckbGoods"]:checked').length;

    // 默认消除部分选中状态
    ckbMainCtrl.indeterminate = false;

    // 一个都没有选中的时候
    if(ckdCount === 0) {
        ckbMainCtrl.checked = false;
    }
    // 全部都选中的时候
    else if(ckdCount === trCount) {
        ckbMainCtrl.checked = true;
    }
    // 部分被选中
    else {
        ckbMainCtrl.indeterminate = true;
    }
}
/**
 * 单个删除功能
 */
function singleDelet() {
    // 获取到所有的删除按钮
    const btnDel = infoTbody.querySelectorAll('.delete'),
          btnDel_len = btnDel.length;
    for(let i = 0; i < btnDel_len; i++) {
        btnDel[i].onclick = function() {
            // 删除当前行
            this.closest('tr').remove();
            // 调用设置全选按钮的显示状态
            setAllCkdState();
            xx();
        }
    }
}
 const btnDelChecked = document.getElementById('btnDelChecked');
    btnDelChecked.onclick = function() {
        selectionDelet();
        // alert(0);
    }
function selectionDelet(){
    const trCount = infoTbody.querySelectorAll('tr').length;
    const ckbGoods = document.querySelectorAll('input[name="ckbGoods"]:checked');
    if(ckbGoods.length == 0)
        alert("没有数据，请加载数据");
    else{
        // for(let i = 0;i < trCount;i++){
        //     if(ckbGoods[i]){
        //         ckbGoods[i].closest('tr').remove();
        //     }
        // }
        while(document.querySelectorAll('input[name="ckbGoods"]:checked').length){
            document.querySelectorAll('input[name="ckbGoods"]:checked')[0].closest('tr').remove();
            setAllCkdState();
            xx();   
        }
    }
}
function xx(){
    const trCount = infoTbody.querySelectorAll('tr').length;
    if(trCount==0){
        ckbMainCtrl.disabled = true;
    }
    else{
        ckbMainCtrl.disabled = false;
    }
}